﻿@page "/components/dropmenu"

<PageOutlet Url="components/dropmenu"
            Title="DropMenu"
            Description="DropMenu component of the bit BlazorUI components" />

<DemoPage Name="DropMenu"
          Description="DropMenu component is a versatile dropdown menu used in Blazor applications. It allows you to create a button that, when clicked, opens a callout or dropdown menu. This can be particularly useful for creating navigation menus, action lists, or any other interactive elements that require a dropdown."
          Parameters="componentParameters"
          SubClasses="componentSubClasses"
              GitHubUrl="Navs/DropMenu/BitDropMenu.razor"
          GitHubDemoUrl="Navs/DropMenu/BitDropMenuDemo.razor">
    <DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
        <BitDropMenu Text="Basic">
            <BitStack Gap="1rem" Style="padding:0.5rem">
                <BitText Typography="BitTypography.Subtitle1">This is the content</BitText>
                <BitButton>Click me</BitButton>
                <BitToggle>Toggle me</BitToggle>
            </BitStack>
        </BitDropMenu>
        <br />
        <BitDropMenu Text="Disabled" IsEnabled="false">
            <BitStack Gap="1rem" Style="padding:0.5rem">
                <BitText Typography="BitTypography.Subtitle1">This is the content</BitText>
                <BitButton>Click me</BitButton>
                <BitToggle>Toggle me</BitToggle>
            </BitStack>
        </BitDropMenu>
        <br />
        <BitDropMenu Text="Transparent" Transparent>
            <BitStack Gap="1rem" Style="padding:0.5rem">
                <BitText Typography="BitTypography.Subtitle1">This is the content</BitText>
                <BitButton>Click me</BitButton>
                <BitToggle>Toggle me</BitToggle>
            </BitStack>
        </BitDropMenu>
    </DemoExample>

    <DemoExample Title="Icon" RazorCode="@example2RazorCode" Id="example2">
        <div>Customizing the drop menu icons.</div><br />
        <BitDropMenu Text="IconName" IconName="@BitIconName.Emoji2">
            <BitStack Gap="1rem" Style="padding:0.5rem">
                <BitText Typography="BitTypography.Subtitle1">This is the content</BitText>
            </BitStack>
        </BitDropMenu>
        <br /><br />
        <BitDropMenu Text="ChevronDownIcon" ChevronDownIcon="@BitIconName.DoubleChevronDown">
            <BitStack Gap="1rem" Style="padding:0.5rem">
                <BitText Typography="BitTypography.Subtitle1">This is the content</BitText>
            </BitStack>
        </BitDropMenu>
    </DemoExample>

    <DemoExample Title="Responsive" RazorCode="@example3RazorCode" Id="example3">
        <div>Rendering the callout in responsive mode on small screens.</div><br />
        
        <BitDropMenu Text="End PanelPosition" Responsive ScrollContainerId="sc-con1" PanelPosition="BitPanelPosition.End">
            <div style="max-width:200px;overflow:auto" id="sc-con1">
                <BitStack FitWidth Gap="1rem" Style="padding:0.5rem">
                    <BitText Typography="BitTypography.Subtitle1" NoWrap>This is the content This is the content This is the content</BitText>
                    <BitText Typography="BitTypography.Subtitle1" NoWrap>This is the content</BitText>
                    <BitText Typography="BitTypography.Subtitle1" NoWrap>This is the content</BitText>
                    <BitText Typography="BitTypography.Subtitle1" NoWrap>This is the content</BitText>
                </BitStack>
            </div>
        </BitDropMenu>
        <br />
        <BitDropMenu Text="Start PanelPosition" Responsive ScrollContainerId="sc-con2" PanelPosition="BitPanelPosition.Start">
            <div style="max-width:200px;overflow:auto" id="sc-con2">
                <BitStack FitWidth Gap="1rem" Style="padding:0.5rem">
                    <BitText Typography="BitTypography.Subtitle1" NoWrap>This is the content This is the content This is the content</BitText>
                    <BitText Typography="BitTypography.Subtitle1" NoWrap>This is the content</BitText>
                    <BitText Typography="BitTypography.Subtitle1" NoWrap>This is the content</BitText>
                    <BitText Typography="BitTypography.Subtitle1" NoWrap>This is the content</BitText>
                </BitStack>
            </div>
        </BitDropMenu>
    </DemoExample>

    <DemoExample Title="Template" RazorCode="@example4RazorCode" Id="example4">
        <div>Here is an example of customizing the drop menu.</div><br />
        <BitDropMenu Text="Add Icon" IconName="@BitIconName.Emoji2">
            <Template>
                <div style="display:flex;gap:10px;">
                    <BitIcon IconName="@BitIconName.Airplane" Color="BitColor.Tertiary" />
                    <span>A template</span>
                    <BitRippleLoading CustomSize="20" Color="BitColor.Tertiary" />
                </div>
            </Template>
            <Body>
                <BitStack Gap="1rem" Style="padding:0.5rem">
                    <BitText Typography="BitTypography.Subtitle1">This is the content</BitText>
                </BitStack>
            </Body>
        </BitDropMenu>
    </DemoExample>

    <DemoExample Title="Events" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
        <div>Utilizing the drop menu OnClick event:</div><br />
        <BitDropMenu Text="@($"Click me ({clickCounter})")" OnClick="() => clickCounter++">
            <BitStack Gap="1rem" Style="padding:0.5rem">
                <BitText Typography="BitTypography.Subtitle1">This is the content</BitText>
            </BitStack>
        </BitDropMenu>
    </DemoExample>

    <DemoExample Title="Style & Class" RazorCode="@example6RazorCode" Id="example6">
        <div>Further customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
        <br /><br />
        <div>Component's Style & Class:</div><br />
        <div>
            <BitDropMenu Text="Styled Drop menu" Style="background-color: transparent; border-color: blueviolet; color: blueviolet;">
                <BitStack Gap="1rem" Style="padding:0.5rem">
                    <BitText Typography="BitTypography.Subtitle1">This is the content</BitText>
                </BitStack>
            </BitDropMenu>
            <br />
            <BitDropMenu Text="Classed Drop menu" Class="custom-class">
                <BitStack Gap="1rem" Style="padding:0.5rem">
                    <BitText Typography="BitTypography.Subtitle1">This is the content</BitText>
                </BitStack>
            </BitDropMenu>
        </div>
        <br /><br /><br /><br />
        <div><b>Styles</b> & <b>Classes</b>:</div><br />
        <div>
            <BitDropMenu Text="Styled Drop menu"
                         Styles="@(new() { Root = "background-color: peachpuff; border-color: peachpuff; min-width: 6rem;",
                                               Text = "color: tomato; font-weight: bold;",
                                               Opened = "border-color: tomato; background-color: goldenrod;" })">
                <BitStack Gap="1rem" Style="padding:0.5rem">
                    <BitText Typography="BitTypography.Subtitle1">This is the content</BitText>
                </BitStack>
            </BitDropMenu>
            <br />
            <BitDropMenu Text="Classed Drop menu"
                         Classes="@(new() { Root = "custom-root",
                                                Text = "custom-text",
                                                Opened = "custom-opened" })">
                <BitStack Gap="1rem" Style="padding:0.5rem">
                    <BitText Typography="BitTypography.Subtitle1">This is the content</BitText>
                </BitStack>
            </BitDropMenu>
        </div>
    </DemoExample>

    <DemoExample Title="RTL" RazorCode="@example7RazorCode" Id="example7">
        <div>Use BitDropMenu in right-to-left (RTL).</div>
        <br />
        <div class="example-content" dir="rtl">
            <BitDropMenu Text="منو" Dir="BitDir.Rtl">
                <BitStack Gap="1rem" Style="padding:0.5rem">
                    <BitText Typography="BitTypography.Subtitle1">این یک محتوای تستی می باشد.</BitText>
                </BitStack>
            </BitDropMenu>
            <br />
            <BitDropMenu Text="ریسپانسیو منو در انتها" Dir="BitDir.Rtl" Responsive ScrollContainerId="sc-con-rtl1">
                <div style="max-width:200px;overflow:auto" id="sc-con-rtl1">
                    <BitStack Gap="1rem" Style="padding:0.5rem">
                        <BitText Typography="BitTypography.Subtitle1" NoWrap>این یک محتوای تستی می باشد این یک محتوای تستی می باشد این یک محتوای تستی می باشد</BitText>
                        <BitText Typography="BitTypography.Subtitle1" NoWrap>این یک محتوای تستی می باشد</BitText>
                        <BitText Typography="BitTypography.Subtitle1" NoWrap>این یک محتوای تستی می باشد</BitText>
                    </BitStack>
                </div>
            </BitDropMenu>
            <br />
            <BitDropMenu Text="ریسپانسیو منو در ابتدا" Dir="BitDir.Rtl" Responsive ScrollContainerId="sc-con-rtl2" PanelPosition="BitPanelPosition.Start">
                <div style="max-width:200px;overflow:auto" id="sc-con-rtl2">
                    <BitStack Gap="1rem" Style="padding:0.5rem">
                        <BitText Typography="BitTypography.Subtitle1" NoWrap>این یک محتوای تستی می باشد این یک محتوای تستی می باشد این یک محتوای تستی می باشد</BitText>
                        <BitText Typography="BitTypography.Subtitle1" NoWrap>این یک محتوای تستی می باشد</BitText>
                        <BitText Typography="BitTypography.Subtitle1" NoWrap>این یک محتوای تستی می باشد</BitText>
                    </BitStack>
                </div>
            </BitDropMenu>
        </div>
    </DemoExample>
</DemoPage>
